<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <script src="/jquery-3.4.1.min.js"></script>
</head>

<body>
<img class="song-albumImg" th:src="${song.albumImg}" alt="">
<h1  class="song-name" th:text="${song.name}"></h1>
<a href="#" th:data-id="${song.id}" class="player-btn">播放</a>
<audio src="" id="player" style="display: none;" controls="controls"></audio>
<h3>
    <label for="">歌手：<span th:text="${song.singer}" class="song-singer"></span> </label>
</h3>
<h3>
    <label>所属专辑:</label><span th:text="${song.albumName}" class="song-albumName"></span>
</h3>
<h3>
    <label>评论数:</label><span th:text="${song.commentCount}" class="song-commentCount"></span>
</h3>
<div class="song-lyrics" th:utext="${song.lyrics}"></div>

<ul>
    <li>
        <a href="#" class="change-song" data-id="2117009">Set Fire to the Rain</a>
        <a href="#" class="player-btn" data-id="2117009">播放</a>
    </li>
</ul>
<h1>评论</h1>
<form action="/comment/post" method="post">
    <input type="hidden" name="nickName" value="bmatch">
    <input type="hidden" name="songId" value="35847388"/>
    <input name="content" type="text" style="width: 80%; height: 100px;" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>

</form>
<h3>精彩评论</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}" alt="">
        <span th:text="${comment.nickName}"></span>
        <span th:text="${comment.content}"></span>
    </li>
    <li>
        <label for="">评论时间</label>
        <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
        <label for="">点赞数</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNum}"></span></a>
    </li>
</ul>
<script>
    $(function () {
        $(".like-btn").on('click',function (e) {
            e.preventDefault();
            var self = $(this);
            var commentId = self.data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"35847388",
                    commentId:commentId
                },
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNum);

                });
        });
    })

</script>
<script>
    $(function() {
        $('.player-btn').on('click', function(e) {
            e.preventDefault();
         var songId=$(this).data("id");
            $.ajax({
                url: '/song/music',
                method: 'GET',
                data: {
                    songId: songId
                },
                cache: false
            }).done(function(data) {
                $('#player').show();
                $('#player').attr('src', data);
                document.getElementById('player').play();
            });
        });
        //切换歌曲
        $('.change-song').on('click',function (e) {
            e.preventDefault();
            var songId=$(this).data("id");
            $.ajax({
                url:'/songinfo/get',
                method:'GET',
                data: {
                    songId:songId
                },
                cache:false
            }).done(function (data) {
                $('.song-albumImg').attr('src',data.albumImg);
                $('.song-albumName').html(data.albumName);
                $('.song-commentCount').html(data.commentCount);
                $('.song-lyrics').html(data.lyrics);
                $('.song-name').html(data.name);
                $('.song-singer').html(data.singer);

            });
        });
    });


</script>
</body>

</html>